<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>spu列表</title>
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/easyui/easyloader.js"></script>

    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css"  href="/easyui/themes/default/easyui.css">
    <!--引入图片上传工具webuploader-->
    <script type="text/javascript" src="/easyui/datagrid-detailview.js"></script>
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
    <script type="text/javascript" src="/webuploader/webuploader.js"></script>
</head>
<body>
<div class="easyui-panel" title=""  data-options="border:true">
        <!-----------------列表 ----------------------------->
        <table id="spulist_dg" class="easyui-datagrid" title="spu列表"
               data-options="singleSelect:true,method:'get' ,toolbar:'#spulist_tb'">
            <thead>
            <tr>
                <th data-options="field:'id'" width="10%">商品id </th>
                <th data-options="field:'spuName'" width="30%">商品名称</th>
                <th data-options="field:'description'" width="60%">商品描述 </th>
            </tr>
            </thead>
        </table>
        <!-----------------列表的工具栏----------------------------->
        <div id="spulist_tb" style="padding:5px;height:auto">
            <div  style="margin-bottom:5px">
                <a href="#" onclick="addSpuInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
                <a href="#" onclick="editSpuInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
                <a href="#" onclick="removeSpuInfo()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
                <a href="#" onclick="addSkuInFo()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">增加sku</a>
                <a href="#" onclick="showSkuInfoList()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">sku列表</a>

            </div>
            <div>
                一级分类：
                <select id="ctg1ForSpuList"   class="easyui-combobox"   style="width:100px" data-options="valueField:'id',textField:'name',url:'getCatalog1',
                onSelect:function(rec){
                $('#ctg2ForSpuList').combobox('clear');
                $('#ctg3ForSpuList').combobox('clear');
                        $('#ctg2ForSpuList').combobox('reload','getCatalog2?catalog1Id='+rec.id);
                   }"  ></select>
                二级分类：
                <select name="ctg2ForSpuList" id="ctg2ForSpuList"  class="easyui-combobox" data-options="valueField:'id',textField:'name',
               onSelect:function(rec){
                $('#ctg3ForSpuList').combobox('clear');
                        $('#ctg3ForSpuList').combobox('reload','getCatalog3?catalog2Id='+rec.id);
                   }"    style="width:100px" ></select>
                三级分类：
                <select name="ctg3ForSpuList" id="ctg3ForSpuList"  class="easyui-combobox" data-options="valueField:'id',textField:'name',
                onSelect:function(rec){
                        $('#spulist_dg').datagrid({url:'getSpuList?catalog3Id='+rec.id}); }"
                        style="width:100px" ></select>
                <a href="#" class="easyui-linkbutton" iconCls="icon-search"  onclick="javascript:reloadSpuList()"  >刷新列表</a>
            </div>
        </div>
</div>
<div th:include="spuInfoPage"></div>
<div th:include="skuListPage"></div>
<div th:include="skuInfoPage"></div>

        <script language="javascript">



            function addSkuInFo() {
                var spuRow = $("#spulist_dg").datagrid('getSelected');
                var catalog3Id=$("#ctg3ForSpuList").combobox('getValue');

                if(spuRow){
                    $("#sku_dlg").dialog("open");
                    // 初始化sku列表
                    initSkuInfoDlg(spuRow.id,catalog3Id)

                }else{
                    alert("请选择spu");
                    return ;
                }
            }
            //关闭当前窗口
            function closeSku() {
                $('#sku_dlg').dialog('close');
            }

            function showSkuInfoList() {
                var spuRow = $("#spulist_dg").datagrid("getSelected");
                if(spuRow){
                    $("#skulist_dlg").dialog("open");
                    // 初始化sku列表
                    initSkuListDatagrid(spuRow.id);
                }else{
                    alert("请选择spu");
                }

            }


            function reloadSkuList() {

                var spuRow = $("#spulist_dg").datagrid("getSelected");
                // 初始化sku列表
                initSkuListDatagrid(spuRow.id);
            }


            //      *  点击增加后要弹出对话框
            function addSpuInfo(){

                var catalog3Id=$("#ctg3ForSpuList").combobox('getValue');
                if(!catalog3Id){
                    $.messager.alert('警告','请先选择三级分类','warning');
                    return false;

                }
//            打开一个属性添加的对话框
                $("#spu_dlg").dialog('open');

//            此初始方法未包含CRUD等方法,动态生成列属性
                // 初始化spu添加页面
                initspuInfoDlo();
            }


        function reloadSpuList(){
            var catalog3Id=$("#ctg3ForSpuList").combobox('getValue');
            if(!catalog3Id){
                $.messager.alert('警告','请先选择三级分类','warning');
                return false;
           }
            $('#spulist_dg').datagrid({url:'getSpuList?catalog3Id='+catalog3Id});

        }

    </script>

</body>
</html>